<style lang="less">
 .personal-account-change-detailed{
     .card-title{
        display: inline-block;
        width: 100%;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: #1c2438;
        font-weight: 700;
        overflow: inherit;
        text-overflow: ellipsis;
        white-space: nowrap;
     }
 }
  .margin-top-10{
    margin-top: 10px;
}
.order{
    font-size: 16px;
    margin-left: 5px;
}
</style>

<template>
    <div class="personal-account-change-detailed">
        <Row>
            <Col span="24" class="">
                <Row>
                    <Col span="24">
                        <Card>
                            <p slot="title" class="card-title">
                                <Row class="" :gutter="10">
                                    <Col :md="4" :lg="2">
                                        <div style="margin-top: 2px;">
                                            <Icon type="ios-pulse"></Icon>
                                            {{this.$route.meta.title}}
                                        </div>
                                    </Col>
                                    <Col :md="20" :lg="22">
                                    <Form :model="formItem" :label-width="80" inline>
                                        <FormItem label="变动类型：">
                                            <Select v-model="type_id" @on-change="typeDataChange" size="small" style="width:120px">
                                                <Option v-for="(key,index) in typeData" :value="index" :key="index">{{key.name}}</Option>                                        
                                            </Select>
                                        </FormItem>
                                        <FormItem label="选择日期范围：">
                                            <DatePicker size="small"  :value="formItem.time" @on-change="setTime" type="daterange" placeholder="Select date and time" style="width: 200px"></DatePicker>
                                        </FormItem>
                                        <Button type="primary"  size="small" style="margin-top: 5px;" @click="search">查询</Button>
                                        <Button type="ghost"  size="small" style="margin-top: 5px;" @click="searchReset">重置</Button>
                                    </Form>
                                    </Col>
                                </Row>
                            </p>
                            <div class="edittable-table-height-con">
                                <Table border stripe :columns="title" :data="data" ></Table>                                
                            </div>
                            <Row class="margin-top-10" :gutter="10">
                                <Page :total="page.count" :current.sync="page.current" class-name="page-margin-top" show-elevator @on-change="pageTurn" show-sizer @on-page-size-change="listDisplayQuantity"></Page>
                            </Row>
                        </Card>
                    </Col>
                    
                </Row>
            </Col>
        </Row>
    </div>
</template>

<script>

export default {
    data () {
        return {
            order_param:'id',
            userData:{},
            type_id:0,
            typeData:[],
            formItem:{
                time:['2018-02-01', '2018-04-01']
            },
            queryData:{
                type_id:{
                    operator:'=',
                    value:''
                },
            },
            page:{
                count:0,
                current:1,
                limit:'0,10'
            },
            data:[],
            title:[
                {
                    title:'编号',
                    key: 'order_id',
                    align:'center',
                    // width:'100'
                },
                {
                    title:'变动类型',
                    key: 'content',
                    align:'center',
                    // width:'100'
                },
                {
                    title:'变动金额',
                    key: 'money',
                    align:'center',
                    // width:'100'
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'变动前余额',
                    // key: 'name',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:parseFloat((params.row.this_balance-params.row.money).toFixed(4))
                               }
                           })
                    },
                    // width:'100'
                },
                {
                    title:'变动后余额',
                    key: 'this_balance',
                    align:'center',
                    // width:'100'
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.this_balance
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },

                {
                    title:'时间',
                    key: 'updated',
                    align:'center',
                    // width:'100'
                },

            ]
        };
    },
	mounted(){
        this.$api.repeater(this,'getAccountChangeTypes').then(res=>{
            this.typeData=[
                {
                    name:'全部',
                    type_id:0
                },
                ...res.data
            ]
        })
        let u=JSON.parse(sessionStorage.user)
        this.userData=u.user_data.User
        
        this.formItem.time=this.getNowFormatDate()
        this.getAccountChange()
	},
    methods: {
        typeDataChange(e){
            if(this.typeData[e].type_id==0){
                this.queryData.type_id.value=''
            }else{
                this.queryData.type_id.value=this.typeData[e].type_id
            }
            this.getAccountChange()
        },
        getAccountChange(){
            let data={
                limit:this.page.limit,
                order_param:this.order_param,
                query_params:this.$oc.ocqm(this.queryData),
                time_between:`${this.formItem.time[0]},${this.formItem.time[1]}`
            }
            this.$api.repeater(this,'getAccountChange',data).then(res=>{
                if(res.success==true){
                    this.page.count=res.data.Count
                    if(res.data.Records==null){
                        this.data=[]
                    }else{
                        this.data=res.data.Records
                    }
                        
                }else{
                    this.$Notice.error({
                        title: '账户资金获取失败，可能是网络故障。。',
                        desc: res.error
                    });
                }
            })
        },
        search(){
            this.getAccountChange ()
        },
        searchReset(){
            this.formItem.time=this.getNowFormatDate()            
            this.getAccountChange ()
        },
        setTime(t){
            
            this.formItem.time=t
            
        },
        order(key){
            this.order_param=this.order_param==key?'id':key
            this.getAccountChange()
        },
        getNowFormatDate () {
            let time = (data) =>{
                let date = new Date();
                if(data) date.setDate(date.getDate()+data);
                let Y = date.getFullYear()
                let M = date.getMonth() + 1;
                let D = date.getDate();
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                if (M >= 1 && M <= 9) M = "0" + M;
                if (D >= 0 && D <= 9) D = "0" + D;
                if (h >= 0 && h <= 9) h = "0" + h;
                if (m >= 0 && m <= 9) m = "0" + m;
                if (s >= 0 && s <= 9) s = "0" + s;
                return `${Y}-${M}-${D}`
            }
            return [time(-30),time(1)];
        },
        //翻页
        pageTurn(ev){
            let limit=this.page.limit.split(",");
            this.page.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getAccountChange()
        },
        //列表显示行数
        listDisplayQuantity(ev){
            this.page.limit=`0,${ev}`
            this.getAccountChange()
        },
        //回到第一页
        startPage(){
            this.page.current=1
            let limit=this.page.limit.split(",");
            this.page.limit=`0,${limit[1]}`
        },
    }
};
</script>